<!-- 个人中心 -->
<template>
	<view class="personal-wrap">

		<view class="user-acrd">

			<!-- 个人信息卡片 -->
			<userinfo-card v-if="userHeadData && userHeadData.style" :scrollTop="scrollTop" :detail="userHeadData" :userOrderList="userOrderList"
				@onShare="onShare"></userinfo-card>
		</view>
<!--		<view class="message-box" @click="tomessage()">-->
<!--			<image class="message-icon" src="@/static/images/icons/message.png"></image>-->
<!--			<view class="new-massage"></view>-->
<!--		</view>-->

		<!-- 自定义模块 -->
		<view class="tool-box">
			<view class="tool-item" @click="goWallet()">
				<text>我要提现</text>
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
      <view class="tool-item" @click="goTuijian()">
        <text>我的推荐</text>
        <u-icon name="arrow-right" color="#999999" size="28"></u-icon>
      </view>
      <view class="tool-item" @click="toscan()">
        <text>订单核销</text>
        <u-icon name="arrow-right" color="#999999" size="28"></u-icon>
      </view>
			<view class="tool-item" @click="goDiscount() ">
				<text>折扣设置</text>
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
			<view class="tool-item" style="padding: 12rpx 0;">
				<button class="online-button" open-type="contact">
					<view class="text"> 在线客服 </view>
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</button>
			</view>
			<view class="tool-item" @click="toYjfk()">
				<text>意见反馈</text>
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
			<view class="tool-item" @click="toxieyi()">
				<text>用户协议</text>
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
		</view>

		<view class="log-out" v-if="isLogin" @tap="showModal = true">
			退出登录
		</view>
    <u-modal ref="uModal" v-model="showModal" :show-cancel-button="true" confirm-color="#F54141"
             cancel-color="#666666" @confirm="goLogin" content="确定退出登录？"></u-modal>
		<!-- 登录提示 -->
<!--		<shopro-auth-modal></shopro-auth-modal>-->
		<!-- 分享组件 -->
	</view>
</template>

<script>
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shAdv from './components/sh-adv.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shCell from './components/sh-cell.vue';
	import shGrid from './components/sh-grid.vue';
	import shOrderCard from './components/sh-order-card.vue';
	import shWallet from './components/sh-wallet.vue';
	import shHotGoods from './components/sh-hot-goods.vue';

	import userinfoCard from './user/userinfo-card.vue';

	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';

	import share from '@/shopro/share';

	export default {
		components: {
			shBanner,
			shGridSwiper,
			shAdv,
			shRichtext,
			shCell,
			shGrid,
			shWallet,
			shOrderCard,
			shHotGoods,

			userinfoCard
		},
		data() {
			return {
				scrollTop: 0,
				showShare: false,
				enable: false,//是否开启吸顶。
        showModal:false,
        userOrderList:{}
			};
		},
		computed: {
			...mapActions(['getUserInfo']),
			...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType']),
			userHeadData() {
				if (this.userTemplate?.length) {
					return this.userTemplate[0].content;
				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		onShow() {
			if (this.isLogin) {
				this.init();
				this.getUserData();
			}
			this.enable = true;
      uni.showTabBar()
		},
		onLoad() {
			console.log(this.userInfo)
		},

		methods: {

			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData','logout']),
      toxieyi(){
        this.jump('/pages/public/richtext', { id: this.initShop.user_protocol || 0 })
      },
			onShare() {
				this.showShare = true;
				uni.hideTabBar();
			},
			// 初始化
			init() {

				this.getUserOrder()
				// 	.then(res => {
				// 		uni.stopPullDownRefresh();
				// 	})
				// 	.catch(e => {
				// 		uni.stopPullDownRefresh();
				// 	});
			},
      getUserOrder(){
        let that = this
        that.$http_business(
            'order.userorder',
            {
              token: uni.getStorageSync("token"),
            },
        ).then(res => {
          if (res.code === 1) {
            let obj = {
              "today_num":res.data.today_num,
              "week_num":res.data.week_num,
              "month_num":res.data.month_num
            };
            this.userOrderList = obj
          } else {
            that.$u.toast(res.msg);
          }
        });
      },
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			tomessage(){
				this.jump('/pages/message/message');
			},
			toYjfk(){
				this.jump('/pages/message/yijian');
			},
			// 我要提现
			goWallet(){
				this.jump('/pages/user/wallet/index');
			},
			// 折扣设置
			goDiscount(){
				this.jump('/pages/user/discount');
			},
      //绑定设备调用微信扫码
      toscan() {
        // 允许从相机和相册扫码
        var that = this;
        if(that.$store.getters.isLogin){
          uni.scanCode({
            success: function(res) {
              console.log("===res",res)
              console.log('条码类型：' + res.scanType);
              console.log('条码内容：' + res.result);
              that.jump(`/${res.path}`);
            }
          });
        }else{
          that.jump(`/pages/index/login`);
          that.$store.dispatch('showAuthModal', 'toLogin');
        }
      },
			// 退出登录
			goLogin(){
        this.logout();
        this.jump(`/pages/index/login`);
        this.$store.dispatch('showAuthModal', 'toLogin');
			},
      goTuijian(){
        this.jump('/pages/user/send');
      }
		}
	};
</script>

<style lang="scss">
	.user-acrd{
		background-color: #fff;
		padding-top: calc(var(--status-bar-height) + 80rpx);
	}
	.copyright-box {
		.copyright-text {
			font-size: 22rpx;
			font-weight: 500;
			color: #c4c4c4;
		}
	}

	.tool-box {
		margin-top: 24rpx;
		padding: 8rpx 40rpx;
		background-color: #fff;

		.tool-item {
			padding: 30rpx 0 32rpx 0;
			border-bottom: 1rpx solid #E7E7E7;
			font-size: 28rpx;
			font-weight: 400;
			color: #222222;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.tool-item:last-child {
			border-bottom: none;
		}
	}

	.log-out {
		margin-top: 24rpx;
		padding: 22rpx 0;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		background-color: #fff;
	}
	.online-button{

		width: 100%;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
		justify-content: space-between;
		background-color: #fff;
		padding: 0;

	}
	.online-button::after{
		border: 0;
	}
	.message-box{
		position: absolute;top: 6.5%;left: 32rpx;
	}
	.message-icon{
		width: 44rpx;
		height: 44rpx;
	}
	.new-massage{
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background-color: red;
		position: absolute;top: 5.4%;left: 35rpx;
	}
</style>
